<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../VUE/min.Vue"></script>
<body>
    <!-- 
        MVVM模型
                1. M：模型(Model)   data中的数据
                2. V: 视图(View)    模板代码
                3. VM； 视图模型(ViewModel)  Vue实例
        
        备注：
                1. data中所有的属性，最后都出现在了 vm 身上
                2. vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用
     -->

     <!-- 这就是模板代码，要把这个DOM元素放在网页上显示 -->
     <div id="root">
         <p>{{name}}</p>
         <h5>{{$options}}</h5>
         <!-- 这个属性是 vm 身上的，在模板中可以直接使用 -->
     </div>
</body>
</html>
<script>
    new Vue({
        el:'#root',
        data(){
            return {
                name:'天在将暗不暗时最浪漫'
                //  在data中自定义的属性最后都会通过Vue的底层将它变为 vm 的一个属性
            }
        }
    })

    
    
</script>